<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html,
      body,
      #map {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script type="text/javascript" src="../dist/ogc.min.js"></script>
    <script
      async
      defer
      type="text/javascript"
      src="https://maps.google.com/maps/api/js?sensor=false&callback=initMap"
    ></script>
    <script type="text/javascript">
      var map;

      function initMap() {
        var center = new google.maps.LatLng(40, -115.0);

        var mapOptions = {
          zoom: 7,
          center: center,
          mapTypeControlOptions: {
            mapTypeIds: ["roadmap", "satellite", "landcover"]
          }
        };

        map = new google.maps.Map(document.getElementById("map"), mapOptions);

        landCoverMapType = google.maps.plugins.ogc.WmsMapType({
          url: "https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?",
          layers: "mrlc_display:NLCD_2016_Land_Cover_L48",
          name: "Land Cover",
          alt: "NLCD_2016_Land_Cover_L48",
          maxZoom: 10
        });

        map.mapTypes.set("landcover", landCoverMapType);
        map.setMapTypeId("landcover");
      }
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
